<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" charset="UTF-8" content="width=device-width, initial-scale=1.0">
    <title>任务列表</title>
    <script src="https://cdn.bootcss.com/babel-polyfill/7.4.4/polyfill.js"></script>
    <script src="${ctx}/js/jquery1.8.2.min.js"></script>
    <script src="${ctx}/js/vue.min.js"></script>
    <script src="${ctx}/js/changeSize.js"></script>
    <link rel="stylesheet" href="${ctx}/css/reset.css">
</head>
<style>
    html,body{
        background: #FAFAFA;
        min-height: 100vh;
        overflow: inherit;
    }
    [v-cloak] {
        display: none;
    }

    .task_list {
        margin-bottom: 3rem;
        height: 100vh;
    }

    .task_header {
        background: #2D90B0;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        text-align: center;
        color: #fff;
        height: 2.6rem;
        line-height: 2.6rem;
        font-size: 1rem;
    }

    .task_header .comeback {
        position: absolute;
        width: 1rem;
        height: 1rem;
        top: 50%;
        transform: translateY(-50%);
        left: 0.5rem;
    }

    .record {
        position: absolute;
        right: 0;
        top: 0;
        width: 2.6rem;
        height: 2.6rem;
    }

    .task_box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 4px;
        padding: 0.7rem;
        /*box-shadow: 2px 2px 8px 2px rgba(49, 49, 49, 0.22);*/
        margin-bottom: 0.5rem;
        background: #fff;
    }

    .task_box:last-child{
        margin-bottom: 3rem;
    }

    .task_detail {
        display: flex;
    }

    .task_detail img {
        margin-right: 0.6rem;
        width: 2.8rem;
        height: 2.8rem;
    }

    .task_detail div {
        padding-top: 0.4rem;
    }

    .title {
        margin-bottom: 0.7rem;
        font-size: 0.84rem;
        max-width: 10rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 400;
        color: #666;
    }

    .describe {
        font-size: 0.65rem;
        color: #ACAEAD;
    }

    .describe i {
        color: #ff541f;
        font-weight: 400;
    }

    .get_money {
        /*display: flex;*/
        align-items: center;
        color: #ff541f;
        font-size: 1rem;
        text-align: right;
    }

    .get_money i {
        font-weight: 400;
        font-size: 0.65rem;
    }

    .get_money span{
        font-weight: 400;
        margin-bottom: 0.5rem;
        display: inline-block;
    }

    .nav{
        position: fixed;
        line-height: 1.2rem;
        padding: 0.5rem 0.8rem 0 0.8rem;
        font-size: 0.8rem;
        color: #999999;
        display: flex;
        justify-content: space-between;
        background: #FAFAFA;
        left: 0;
        top: 0;
        width: 92%;
        z-index: 3;
    }
    .nav ul{
        display: flex;
        width: 13rem;
        align-items: center;
        justify-content: space-between;
        font-weight: 400;
    }
    .nav ul li{
        height: 1.8rem;
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(255,255,255,0)
    }
    .nav ul .act{
        color: #FF5C5D;
        border-bottom: 0.15rem solid  #FF5C5D;
        line-height: 1.3rem;
    }
    .screen{
        width: 2.2rem;
        display: inline-block;
        line-height: 1.4rem;
        font-size: 0.8rem;
        color: #999999;
        position: relative;
        font-weight: 400;
    }
    .screen img{
        width: 1rem;
    }
    .screen::after{
        content: '';
        background: url(${ctx}/image/jietu/screen.png);
        background-size: 100%;
        background-repeat: no-repeat;
        height: 0.7rem;
        width: 0.7rem;
        position: absolute;
        right: -0.2rem;
        top: 0.38rem;
    }
    .showscreen{
        color: #FF5C5D;
    }
    .showscreen::after{
        content: '';
        background: url(${ctx}/image/jietu/actscreen.png);
        background-size: 100%;
        background-repeat: no-repeat;
        height: 0.7rem;
        width: 0.7rem;
        position: absolute;
        right: -0.2rem;
        top: 0.38rem;
    }

    .screen_mask{
        width: 100%;
        position: absolute;
        top: 2.45rem;
        left: 0;
        z-index: 5;
    }
    .screen_con{
        background: #fff;
        font-size: 0.9rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        line-height: 2.5rem;
    }
    .screen_con p{
        border-bottom: 0.08rem solid rgba(244,244,244,0.5);
        padding: 0 0.8rem;
        font-size: 0.8rem;
    }

    .screen_con p:hover{
        background: #E5E5E5;
    }

    .screen_con .screen_act{
        color: #FF5C5D;
        position: relative;
    }
    .screen_con .screen_act::after{
        content: '';
        color: #FF5C5D;
        position: absolute;
        background: url(${ctx}/image/jietu/gou.png);
        background-size: 100%;
        background-repeat: no-repeat;
        width: 0.9rem;
        height: 0.8rem;
        top: 0;
        right: 0.8rem;
        bottom: 0;
        margin: auto;
    }
    .get_task {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 0.5rem 0;
        background: rgba(255,255,255,0.8);
        /*background: #fff;*/
        z-index: 2;
        /*border-top: 0.2rem solid #F5F5F5;*/
    }

    .get_task div {
        text-align: center;
    }

    .get_task div .all {
        display: inline-flex;
        padding: 0 0.7rem;
        border-radius: 1rem;
        height: 2rem;
        line-height: 2rem;
        text-align: center;
        background: linear-gradient(to right, #FF7C5B , #FF595E);;
        color: #fff;
        font-size: 0.8rem;
        margin-left: 0.4rem;
    }
    .get_task div .all img{
        width: 0.6rem;
        margin-top: 0.65rem;
        height: 0.75rem;
    }
    .get_task div .right{
        padding-left: 2rem;
        padding-right: 0.3rem;
    }
</style>
<body>
<div id="app">
    <div class="task_list"  v-cloak>
        <div class="nav">
            <ul>
                <li :class="navact===-1?'act':''" @click="getTaskList(navact=-1)" >全部</li>
                <li :class="navact===0?'act':''" @click="getTaskList(navact=0)">最新</li>
                <#list tagList as list>
                    <li :class="navact===${list.id}?'act':''" @click="getTaskList(navact=${list.id})" >${list.tagName}</li>
                </#list>
            </ul>
            <div class="screen" @click="showScreen()" :class="screenSwitch?'showscreen':''">筛选</div>
            <div class="screen_mask" v-if="screenSwitch">
                <div style="position: fixed;width: 100%;height: 100%;z-index: -1;height: 100vh;background: rgba(0,0,0,0.5);" @click="screenSwitch=false"></div>
                <div class="screen_con">
                    <#list classifyList as classifylist>
                            <p :class="screenType==${classifylist.id}?'screen_act':''" @click="getTaskList(screenType=${classifylist.id})">${classifylist.categoryName}</p>
                    </#list>
                    <p :class="screenType==0?'screen_act':''" @click="getTaskList(screenType=0)">全部分类</p>
<#--                    <p :class="screenType==4?'screen_act':''" @click="screenType=4">账号注册</p>-->
<#--                    <p :class="screenType==3?'screen_act':''" @click="screenType=3">添加微信</p>-->
<#--                    <p :class="screenType==2?'screen_act':''" @click="screenType=2">添加客服</p>-->
<#--                    <p :class="screenType==1?'screen_act':''" @click="screenType=1">其他</p>-->
                </div>
            </div>
        </div>
        <div style="margin-top: 2rem"></div>
        <div class="get_task" id="get_task" style="display: none">
            <div>
                <div class="all">
                    <span id="remind_name" style="letter-spacing: 0.08rem;"></span>
                    <span class="right" @click="getDetail()">去提交</span>
                    <img src="${ctx}/image/jietu/RightArrow.png">
                </div>
            </div>
        </div>
        <div class="task_box" v-for="(item,index) in taskList" :key="index"
             @click="gotoDetail(item.category,item.taskId,item.needCheck)">
            <div class="task_detail">
                <img :src="item.icon">
                <div>
                    <p class="title">{{item.title}}</p>
                    <p class="describe">{{item.taskIntroduce}}</p>
                </div>
            </div>
            <div class="get_money">
<#--                <i style="font-size: 1rem"></i>-->
                <span>+{{item.label}}元</span>
                <p class="describe" style="display: block;width: 100%;text-align: right;">剩余<i>{{item.size}}</i>份</p>
            </div>
        </div>
<#--        <div class="get_task" id="get_task" style="display: none">-->
<#--            <div>-->
<#--                <div class="all">-->
<#--                    <span id="remind_name" style="letter-spacing: 0.08rem;"></span>-->
<#--                    <span class="right" @click="getDetail()">去提交</span>-->
<#--                    <img src="${ctx}/image/jietu/RightArrow.png">-->
<#--                </div>-->
<#--            </div>-->
<#--        </div>-->
        <p style="font-size: 0.7rem;color: #ccc;line-height: 1.5rem;text-align: center;padding-top: 0.5rem">暂无更多记录</p>
    </div>
</div>
</body>
</html>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            taskId:null,
            type:null,
            isShow: false,
            taskList: [],
            navact:-1,
            screenSwitch:false,
            screenType:0,
        },
        mounted: function () {
            this.getTask();
            this.getAppList();
            window.refreshList = this.refreshList;
            window.goRecordList = this.goRecordList;
            window.xy_web.setActivityTitle('任务列表');
            window.xy_web.showAndHideRecord(true);
        },
        methods: {
            // 获取列表信息
            getTask: function () {
                var that = this;
                var header = window.xy_web.getNetHeader();
                $.ajax({
                    url: "/newweb/task/newlist",
                    type: 'post',
                    async: false,
                    data:{'tagId':that.navact,'classifyId':that.screenType},
                    headers: JSON.parse(header),
                    // headers: that.header,
                    // headers:{"appStore":"test","appid":"xianyu","brand":"honor","imei":"863254030974322","lat":"","lng":"","macAddr":"C4:0B:CB:F2:C7:18","os":"Othernull","osv":"MI 6","sign":"7e058d5d632eaf9e75de4a687f12fdfd","time":"1565253309935","userid":"da68e3c0ff6b4101962cc5bc401dac47","version":"100"},
                    dataType: "json",
                    success: function (res) {
                        if (res) {
                            that.taskList = res.data;
                        } else {
                            console.log('fail');
                        }
                        window.xy_web.closeRefresh();
                    }
                });
            },

            // 跳转详情页
            gotoDetail: function (type, id, status) {

                window.xy_web.showLoading();
                if (type === 'Common' || type ==='Redbook') {
                    // if (type === 'Soso') {
                    //     window.location.href = '/web/api/task/' + (!status && type === 'Soso'?'sosodetail':'checksoso') + '?type=' + type + '&taskId=' + id;
                    // }else {
                    //     window.location.href = '/web/api/task/taskdetail?type=' + type + '&taskId=' + id;
                    // }
                    window.location.href = '/webapi/newweb/task/taskdetails?type=' + type + '&taskId=' + id;
                } else {
                    // window.location.href = "/web/api/task/comments?type=" + type + '&taskId=' + id;
                    window.location.href = "/webapi/newweb/task/commentsdetails?type=" + type + '&taskId=' + id;
                }
            },

            // 返回上一页
            comeback: function () {
                window.history.back(-1);
            },

            // 刷新数据
            refreshList: function () {
                this.getTask();
            },

            // 前往任务记录列表
            goRecordList: function () {
                var storage = window.sessionStorage;
                storage.removeItem("category");
                window.location.href = "/webapi/newweb/task/history";
            },
            getDetail: function (){
                var type=this.type;
                var taskId=this.taskId;
                this.gotoDetail(type,taskId,null);
            },

            showScreen(){
                let that=this;
                that.screenSwitch=true;
            },
            getTaskList(res) {
                this.getTask();
            },
            //查询未完成任务
            getAppList(){
                var that = this;
                var header = window.xy_web.getNetHeader();
                $.ajax({
                    url: "/newweb/task/remind",
                    type: 'post',
                    async: false,
                    headers: JSON.parse(header),
                    // headers: that.header,
                    // headers:{"appStore":"test","appid":"xianyu","brand":"honor","imei":"863254030974322","lat":"","lng":"","macAddr":"C4:0B:CB:F2:C7:18","os":"Othernull","osv":"MI 6","sign":"7e058d5d632eaf9e75de4a687f12fdfd","time":"1565253309935","userid":"da68e3c0ff6b4101962cc5bc401dac47","version":"100"},
                    dataType: "json",
                    success: function (res) {
                        if (res.data.isTrue){
                            that.taskId=res.data.taskId;
                            that.type=res.data.category;
                            // this.taskRemind=res.data;
                            if(res.data.status == 'WaitSumbit'){
                                $("#remind_name").html("有一个任务待提交");

                            }
                            if(res.data.status == 'CheckFailure'){
                                $("#remind_name").html("有一个任务待重新提交")
                            }
                            $("#get_task").css("display","block");
                        }else {
                            $("#get_task").css("display","none");
                        }
                        window.xy_web.closeRefresh();
                    }
                });
            },
        },
        watch: {
            screenType() {
                this.screenSwitch=false
            },
            navact(){
                this.screenSwitch=false
            }
        }
    });
</script>
